<template>
	<CommonHeader :title="contest.name" :navs="navs" :func="func" 
		:title-url="'/contest/' + contest.id"/>
</template>


<script type="module">
	import CommonHeader from '@/components/CommonHeader.vue';
	
	const contestRankUrl = (id) => `/contest/${id}/rank`;
	const contestStatusUrl = (id) => `/contest/${id}/status`;

	const menu = Object.freeze([
		{
			name: "go_home",
			url: "/",
			icon: "fa fa-home",
		},
	]);

	const navs = (contestId) => {
		let temp = [
			{
				name: "rank",
				target: contestRankUrl(contestId),
				visiable: true,
			},
			{
				name: "status",
				target: contestStatusUrl(contestId),
				visiable: true,
			},
		];

		return temp;
	};



	export default {
		props:['contest'],
		data() {
			return {
				navs: null,
				func: menu,
			};
		},
		components: {
			CommonHeader,
		},
		created() {
			this.processContest(this.contest);
		},
		watch: {
			contest(contest) {
				this.processContest(contest);
			}
		},
		methods: {
			processContest(contest) {
				if (contest) {
					this.navs = navs(contest.id);
				}
			},
		}
	} 
</script>